<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-teal-50 pt-32 pb-16">
    <div class="container mx-auto px-4">
      <!-- 返回按钮 -->
      <div class="mb-8">
        <NuxtLink to="/project"
          class="inline-flex items-center text-blue-600 hover:text-blue-800 transition-colors"
        >
          <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
          </svg>
          返回项目列表
        </NuxtLink>
      </div>

      <!-- 项目不存在提示 -->
      <div v-if="!project" class="text-center py-20">
        <div class="text-5xl mb-4 text-gray-300">🔍</div>
        <h2 class="text-2xl font-semibold text-gray-700 mb-2">项目不存在</h2>
        <p class="text-gray-500 mb-6">未找到对应ID的项目信息</p>
        <NuxtLink to="/project"
          class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition-colors"
        >
          查看所有项目
        </NuxtLink>
      </div>

      <!-- 项目详情卡片 -->
      <div v-else class="bg-white rounded-xl shadow-lg overflow-hidden max-w-4xl mx-auto transform transition-all duration-500 hover:shadow-xl">
        <!-- 项目图片 -->
        <div class="w-full h-80 overflow-hidden">
          <img
            :src="project.image"
            :alt="project.name"
            class="w-full h-full object-cover transition-transform duration-700 hover:scale-105"
          >
        </div>

        <!-- 项目信息 -->
        <div class="p-8">
          <!-- 分类和发布时间 -->
          <div class="flex justify-between items-center mb-4">
            <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">
              {{ getCategoryName(project.category) }}
            </span>
            <time class="text-gray-500 text-sm">
              {{ project.publishDate }}
            </time>
          </div>

          <!-- 项目标题 -->
          <h1 class="text-3xl font-bold text-gray-900 mb-4">
            {{ project.name }}
          </h1>

          <!-- 项目描述 -->
          <div class="prose prose-blue max-w-none text-gray-700 mb-8">
            <p>{{ project.description }}</p>
          </div>

          <!-- 项目详情内容 -->
          <div class="prose prose-blue max-w-none text-gray-700 mb-8">
            <h2>项目介绍</h2>
            <p>{{ project.details }}</p>

            <h3>主要功能</h3>
            <ul>
              <li v-for="feature in project.features" :key="feature">{{ feature }}</li>
            </ul>

            <h3>技术栈</h3>
            <div class="flex flex-wrap gap-2 my-4">
              <span v-for="tech in project.technologies" :key="tech"
                class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded"
              >
                {{ tech }}
              </span>
            </div>
          </div>

          <!-- 项目链接 -->
          <div class="flex flex-wrap gap-4 pt-4 border-t border-gray-100">
            <a
              :href="project.link"
              target="_blank"
              rel="noopener noreferrer"
              class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"
            >
              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6v6m0 0v6m0-6h-6"></path>
              </svg>
              查看项目地址
            </a>
            <a
              :href="project.githubUrl"
              target="_blank"
              rel="noopener noreferrer"
              class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
            >
              <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"></path>
              </svg>
              GitHub 仓库
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';

// 获取路由参数
const route = useRoute();
const projectId = parseInt(route.params.id);

// 项目分类
const categories = [
  { id: 'all', name: '全部项目' },
  { id: 'web', name: '网站项目' },
  { id: 'mobile', name: '移动端项目' },
  { id: 'backend', name: '后端项目' },
  { id: 'open-source', name: '开源项目' }
];

// 项目详细数据
const projects = [
  {
    id: 1,
    name: '企业数据分析平台',
    description: '基于Vue.js和Node.js构建的企业级数据分析平台，支持实时数据可视化和多维度分析。',
    details: '该平台为企业提供全面的数据可视化解决方案，集成了多种图表类型和数据处理功能，帮助企业决策者快速掌握业务状况。系统采用前后端分离架构，前端使用Vue.js和ECharts，后端采用Node.js和MongoDB，确保了系统的高性能和可扩展性。',
    image: 'https://picsum.photos/id/0/1200/800',
    category: 'web',
    publishDate: '2023-06-15',
    link: '/project/web/1',
    githubUrl: 'https://github.com/example/enterprise-analytics',
    features: [
      '实时数据处理与可视化',
      '多维度数据分析报表',
      '自定义仪表盘配置',
      '用户权限管理系统'
    ],
    technologies: ['Vue.js', 'Node.js', 'MongoDB', 'ECharts', 'Express']
  },
  {
    id: 2,
    name: '电商管理系统',
    description: '全栈开发的电商管理系统，包含商品管理、订单处理、用户分析等功能模块。',
    details: '电商管理系统是一个完整的在线零售解决方案，提供从商品上架到订单发货的全流程管理。系统包含商品管理、库存监控、订单处理、会员管理、营销活动等核心功能模块，界面简洁直观，操作便捷高效。',
    image: 'https://picsum.photos/id/180/1200/800',
    category: 'web',
    publishDate: '2023-04-22',
    link: '/project/web/2',
    githubUrl: 'https://github.com/example/ecommerce-admin',
    features: [
      '商品多规格管理',
      '订单实时追踪',
      '库存预警系统',
      '会员等级与积分管理'
    ],
    technologies: ['React', 'Node.js', 'MySQL', 'Redis', 'Ant Design']
  },
  // 其他项目数据...
];

// 当前项目
const project = computed(() => projects.find(p => p.id === projectId));

// 获取分类名称
const getCategoryName = (categoryId) => {
  const category = categories.find(cat => cat.id === categoryId);
  return category ? category.name : '未分类';
};
</script>

<style scoped>
/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 图片过渡效果 */
img {
  transition: all 0.3s ease;
}

/* 项目卡片阴影效果 */
.bg-white {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
</style>